import React, { CSSProperties, FC, useEffect, useState } from 'react';

import classnames from 'classnames';
import { DatePicker as Datepick } from 'antd';
const { RangePicker } = Datepick;
import moment from 'moment';

import styles from './index.less';

enum pickerType {
  'general',
  'range',
}

interface generalProps {
  style?: CSSProperties;
  type?: 'general';
  placeholder?: string;
  onChange?: (v: any) => void;
  value?: any;
}

interface rangeProps {
  style?: CSSProperties;
  type?: 'range';
  placeholder?: [string, string];
  onChange?: (v: any) => void;
  value?: any;
}

const DatePicker: FC<generalProps | rangeProps> = (props) => {
  const { style, type = 'general', placeholder, onChange, value } = props;
  const generalPlaceholder = placeholder
    ? (placeholder as string)
    : '请选择日期';
  const rangePlaceholder: [string, string] = placeholder
    ? (placeholder as [string, string])
    : ['开始日期', '结束日期'];
  return pickerType[type] === 0 ? (
    <Datepick
      style={{ ...style }}
      className={styles.picker_container}
      placeholder={generalPlaceholder}
      format="YYYY-MM-DD"
      allowClear={false}
      value={value ? moment(value) : undefined}
      onChange={(_, string) => onChange && onChange(string)}
      // getPopupContainer={() => document.getElementById('root') as any}
    ></Datepick>
  ) : (
    <RangePicker
      style={{ ...style }}
      className={classnames(styles.picker_container, styles.range)}
      format="YYYY-MM-DD"
      placeholder={rangePlaceholder}
      allowClear={false}
      value={value ? value.map((item: any) => moment(item)) : undefined}
      // getPopupContainer={() => document.getElementById('root') as any}
      onChange={(_, strings) => onChange && onChange(strings)}
    ></RangePicker>
  );
};

export default DatePicker;
